<!-- 余额明细 -->
<template>
	<view class="content page">
		<back-top v-if='showTop'></back-top>
		<!-- #ifdef MP-WEIXIN -->
		<navBar :bgMake="5" :Color="2" title="余额明细"></navBar>
		<!-- #endif -->
		<view v-if="pageData && pageData.length > 0">
			<view class="item_list" v-for="(item,index) in pageData" :key="index">
				<view class="list_info">
					<view class="info_box">
						<view class="info_title">{{item.title}}</view>
						<view class="info_time">{{item.addDate}}</view>
					</view>
					<view class="info_box infoboxt">
						<text v-if='item.status == 0' class="error-color"><text>-</text> {{item.money}}</text>
						<text v-if='item.status == 1' class="success-color"><text>+</text>{{item.money}}</text>
					</view>
				</view>
			</view>
			<view class="DiLine" v-if='!more'>---- 我也是有底线的 -----</view>
		</view>
		<view v-else>
			<emptys title='暂无相关记录 !'></emptys>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	var that;
	export default {
		data() {
			return {
				showTop: false,
				pageData: [],
				page: 1,
				pageSize: 15,
				more: false,

			}
		},


		onLoad() {
			that = this

			that.getpageData()

		},

		methods: {
			getpageData() {
				that.more = false
				that.$http.post({
					url: '/SRA_memberRecharge/moneyRecord',
					data: {
						VeriCode: uni.getStorageSync('bid'),
						vId: that.vid,
						Y: '',
						M: '',
						pageIndex: that.page,
						pageSize: that.pageSize,
					}
				}).then(res => {
					if (res.code == 100) {
						if (res.data) {
							that.pageData = that.pageData.concat(res.data)
							if (res.data.length >= that.pageSize) {
								that.more = true
								that.page += 1
							}
						}
					}
					uni.hideLoading()
				})
			}
		},
		onReachBottom(e) {
			if (that.more) {
				that.getpageData()
			}
		},
		computed: {
			...mapState(['color', 'bid', 'vid', 'nameDefinition']),
		},
		onPageScroll(e) {
			if (e.scrollTop > 333) {
				that.showTop = true
			} else {
				that.showTop = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		font-size: 28upx;
		color: #333333;
		min-height: 101vh;
	}

	.item_list {
		width: 100%;
		border-bottom: 1px solid #F4F4F4;
	}

	.list_info {
		width: 100%;
		background: #FFFFFF;
		padding: 30upx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.info_box {
		width: 50%;
		height: 70upx;
	}

	.info_title {
		font-size: 32upx;
	}

	.info_time {
		color: #8A8A8A;
		font-size: 24upx;
	}

	.info_money {
		font-size: 40upx;
		color: #F86375;
	}

	.infoboxt {
		text-align: right;
		line-height: 70upx;

		text {
			font-size: 36rpx;
			margin-right: 4rpx;

			text {
				font-size: 40rpx;
				font-weight: bold;
			}

		}
	}

	.nolist {
		text-align: center;
		color: #8A8A8A;
		line-height: 100upx;
	}
</style>